<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>购物商城</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../scss/detail.css">
  <link rel="stylesheet" href="../scss/header.css">
  <style>
    * {
      margin: 0 auto;
      padding: 0;
      list-style: none;
    }

    .header-a {
      text-decoration: none;
      color: #CCCCCC;
    }

    li {
      float: left;
      width: 6.25%;
      text-align: center;
      line-height: 30px;


    }

    li a {
      color: #FFFFFF;
      font-size: 12px;
      text-decoration: none;
    }

    li a:hover {
      color: #FFFF00;
    }

    a:hover {
      color: black;
    }
  </style>

</head>

<body>

  <div>
    <!--头页面的第一部分-->
    <div class="header-box">
      <div class="header" style="width: 1200px;height: 32px;font-size: 12px;line-height: 32px;text-align: right;">
        <!-- 官方网站：<a href="http://gz.gec-edu.org/?gzbdgzbdyueqianpc23"> http://gz.gec-edu</a> -->
        <a href="./login.html">登录</a>
        <a href="./register.html">免费注册</a>
        <a href="#">我的购物车</a>
        <a href="#">我的订单</a>
        <a href="#">设置为首页</a>
        <a href="#">加入收藏</a>
      </div>
    </div>
    <!--头页面的第二部分-->
    <div style="width: 1200px;height: 110px;position: relative">
      <img src="../images/logo.gif" alt="">
      <img src="../images/banner.gif" alt="" style="margin-top: 10px;">

      <div style="position: absolute;right: 50px;top: 30px;font-size: 12px;">
        <div style="border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height: 20px;text-align: center">
          <a href="#" class="header-a">关于我们</a></div>
        <div
          style="margin-top: 10px;border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height: 20px;text-align: center">
          <a href="#" class="header-a">联系方式</a></div>
      </div>

    </div>
    <!--头页面的第三部分-->
    <div style="width: 100%;height: 30px;background-color: #CC3333">
      <div style="width: 1200px;height: 30px;">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">护肤</a></li>
          <li><a href="#">彩妆</a></li>
          <li><a href="#">香氛</a></li>
          <li><a href="#">身体护理</a></li>
          <li><a href="#">礼盒套装</a></li>
          <li><a href="#">母婴专区</a></li>
          <li><a href="#">男士专区</a></li>
          <li><a href="#">粉底</a></li>
          <li><a href="#">粉饼</a></li>
          <li><a href="#">睫毛膏</a></li>
          <li><a href="#">唇彩</a></li>
          <li><a href="#">腮红</a></li>
          <li><a href="#">食品保健</a></li>
          <li><a href="#">瘦身类</a></li>
          <li><a href="#">美容类</a></li>
        </ul>
      </div>
    </div>
  <!-- 主内容 -->
  <div class="main">
    <!-- 分类 -->
    <div class="categery">
      <h3>物品分类</h3>
      <ul>
        <li><a href="#"><span>护肤</span><i></i></a></li>
        <li><a href="#"><span>彩妆</span><i></i></a></li>
        <li><a href="#"><span>香氛</span><i></i></a></li>
        <li><a href="#"><span>身体护理</span><i></i></a></li>
        <li><a href="#"><span>礼盒套装</span><i></i></a></li>
        <li><a href="#"><span>母婴专区</span><i></i></a></li>
        <li><a href="#"><span>男士专区</span><i></i></a></li>
        <li><a href="#"><span>粉底</span><i></i></a></li>
        <li><a href="#"><span>粉饼</span><i></i></a></li>
        <li><a href="#"><span>睫毛膏</span><i></i></a></li>
        <li><a href="#"><span>唇彩</span><i></i></a></li>
        <li><a href="#"><span>腮红</span><i></i></a></li>
      </ul>
    </div>
    <!-- 列表 -->
    <div class="item-list">
      <div class="list-main">
        <h3>卡姿兰专业十分专科柔嫩洁超出查找面泡沫120ml这是编的</h3>
        <div class="item">
          <div class="pic"> 
            <img src="../images/20130331_1_1.jpg" alt="">
            <p>评分：<span class="star"></span>(已有151人评价)</p>
            <p>该商品支持全国购买</p>
          </div>
          <div class="info">
            <div class="item-info">
              <p>供应商：卡姿兰专业十分专科</p>
              <p>出产地：卡姿兰专业十分专科</p>
              <p>定价：<s>￥50.00</s></p>
              <p class="red">疯狂价：￥40.00</p>
              <p>库存：1001下单后立即发货</p>
              <p>促销信息：<span class="red">该商品参加满减活动，购买活动商品每满300元，可减100元</span></p>
            </div>
            <div class="buy">
              <div class="num">
                <span>我要买:</span>
                <input type="button" class="sub" value="-"/>
                <input type="number" class="number" value="1"/>
                <input type="button" class="add" value="+"/>
              </div>
              <div class="add-btn">
                <span class="add-cart"></span>
                <span class="add-notice"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">
    <section class="footer_top">
        <section class="footer_top_content">
            <aside>
                <h3>客服热线(免长途费)</h3>
                <em>400 116 11111</em>
                <p>客服时间：9：00-24：00</p>
                <p>周末/周日：10：00-24：00</p>
                <figure>
                    <figcaption><img src="../images/erweima_03.png" alt=""></figcaption>
                    <p>购物商城</p>
                </figure>
                <figure>
                    <figcaption><img src="../images/erweima_03.png" alt=""></figcaption>
                    <p>购物商城</p>
                </figure>
            </aside>
            <article>
                <section class="footer_top_content_article_top">
                    <div><img src="../images/2014052815002.png" alt=""></div>
                    <div><img src="../images/2014052815003.png" alt=""></div>
                    <div><img src="../images/2014052815004.png" alt=""></div>
                    <div><img src="../images/2014052815005.png" alt=""></div>
                </section>
                <section class="footer_top_content_article_bottom">
                    <ul>
                        <li>支付方式</li>
                        <li>在线支付</li>
                        <li>货到付款</li>
                        <li>发票说明</li>
                    </ul>
                    <ul>
                        <li>支付方式</li>
                        <li>在线支付</li>
                        <li>货到付款</li>
                        <li>发票说明</li>
                    </ul>
                    <ul>
                        <li>支付方式</li>
                        <li>在线支付</li>
                        <li>货到付款</li>
                        <li>发票说明</li>
                    </ul>
                    <ul>
                        <li>支付方式</li>
                        <li>在线支付</li>
                        <li>货到付款</li>
                        <li>发票说明</li>
                    </ul>
                </section>

            </article>
        </section>
    </section>
    <section class="footer_bottom">
        <span> Copyright © 2008-2014  All Rights Reserved.Copyright © 2008-2014  All Rights Reserved.Copyright © 2008-2014  All Rights Reserved.</span>
    </section>
  </div>
  <script src="../js/detail.js"></script>
</body>

</html>